<template>
  <div class="dashboard-editor-container">
    <h2 class="ui center aligned icon header">
      <i class="circular cloud icon"></i>
      当前环境数据
    </h2>
    <panel-group @handleSetLineChartData="handleSetLineChartData" />

    <el-row
      style="background:#fff;padding:16px 16px 0;margin-bottom:32px;"
      flex="dir:top main:center cross:center"
    >
      <day-line-chart :device-name="valueName" :chart-data="devicedata" />
    </el-row>

    <el-row
      style="background:#fff;padding:16px 16px 0;margin-bottom:32px;"
      flex="dir:top main:center cross:center"
    >
      <year-line-chart :device-name="valueName" :chart-data="lineChartData" />
    </el-row>
  </div>
</template>

<script>
// import { init } from "echarts/lib/echarts";
import deviceDataApi from "@/api/device"
import PanelGroup from "./components/PanelGroup";
import DayLineChart from "./components/DayLineChart";
import YearLineChart from "./components/YearLineChart";

const lineChartData = {
  Temperature: {
    DayData: [14, 15, 18, 22, 26, 28, 30, 30, 27, 25, 19, 16],
    MonthData: [14, 15, 18, 22, 26, 28, 30, 30, 27, 25, 19, 16]
  },
  Humidity: {
    DayData: [30, 36, 38, 34, 39, 40, 44, 41, 48, 43, 40, 37],
    MonthData: [30, 36, 38, 34, 39, 40, 44, 41, 48, 43, 40, 37]
  },
  LightIntensity: {
    DayData: [
      55056,
      44853,
      54655,
      57064,
      69532,
      113200,
      100122,
      99543,
      93812,
      65467,
      65443,
      56325
    ],
    MonthData: [
      55056,
      44853,
      54655,
      57064,
      69532,
      113200,
      100122,
      99543,
      93812,
      65467,
      65443,
      56325
    ]
  },
  SoilTemperature: {
    DayData: [12, 13, 18, 22, 26, 30, 32, 33, 26, 23, 18, 12],
    MonthData: [12, 13, 18, 22, 26, 30, 32, 33, 26, 23, 18, 12]
  },
  SoilHumidity: {
    DayData: [67, 76, 88, 84, 79, 80, 89, 88, 78, 75, 80, 65],
    MonthData: [67, 76, 88, 84, 79, 80, 89, 88, 78, 75, 80, 65]
  },
  SoilPh: {
    DayData: [6.4, 6.4, 6.7, 7, 6.9, 7.1, 6.5, 7.2, 6.4, 6.6, 7.2, 7],
    MonthData: [6.4, 6.4, 6.7, 7, 6.9, 7.1, 6.5, 7.2, 6.4, 6.6, 7.2, 7]
  }
};
export default {
  components: {
    PanelGroup,
    DayLineChart,
    YearLineChart
  },
  data() {
    return {
      chart: null,
      lineChartData: lineChartData.Temperature,
      devicedata: {},
      deviceName: "Temperature",
      valueName: "空气温度(°C)"
    };
  },
  created() {
    this.searchDayData();
  },

  methods: {
    handleSetLineChartData(type,name) {
      this.lineChartData = lineChartData[type];
      this.valueName = name;
      this.deviceName = type;
      this.searchDayData();
    },
    // handleValueName(name) {
    //   this.valueName = name;
    // },
    searchDayData() {
      deviceDataApi.searchNewDayData(this.deviceName).then(resp => {
        this.devicedata = resp.data;
        console.log("数据：",resp.data);
      })
    }
  }
};
</script>

<style scoped src="semantic-ui-css/semantic.min.css"></style>
<style>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
}
.charts {
  /* margin-left: 15%;
  margin-right: 15%; */
  width: 1050px;
  /* max-width: 1050px; */
  height: 330px;
}
.envir-card {
  margin-left: 20px;
  margin-right: 20px;
}
</style>